<template>
    <div class="z-time" :style="timeStyle">
        <div class="records-container-header" @click="onState">
            <div :class="{ 'container-header-item': true, active: checkActive == k ,'noadmin':!userCode}" v-for="(v, k) in checkList" :key="k" @click="onCheck(k)">
                {{ v.name }}
            </div>
            <div :class="{ 'container-header-custom': true, active: checkActive == '4'}" @click="onCheck(4)" v-if="userCode">
                <div class="header-select-icon"></div>
                自定义
            </div>
        </div>
        <div class="records-container-time">
            <div class="container-time-item">{{ startTime }}</div>
            <div class="container-time-center">至</div>
            <div class="container-time-item">{{ endTime }}</div>
        </div>
    </div>
    <!-- <div class="z-time-bottom"></div> -->
    <!-- 日期时间区间 -->
    <z-picker-group v-model:show="timeRangeShow" title="日期时间区间" @confirm="onConfirm" type="dateTimeRange" :tabs="['开始日期', '开始时间', '结束日期', '结束时间']" />
</template>
<script setup>
import dayjs from 'dayjs'
// import Api from '@/api'
import ls from '@/lib/ls'
import isoWeek from 'dayjs/plugin/isoWeek'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

dayjs.extend(isoWeek)
const props = defineProps({
    bottom: {
        type: [Number, String],
        default: 10,
    }
})
const { bottom } = toRefs(props);
const timeStyle = computed(() => {
    return {
        paddingBottom: `${bottom.value}px`,

    };
});
const timeRangeShow = ref(false) 
const startTime = ref(transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0]) 
const endTime = ref(transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1]) 
const checkActive = ref(0) // 那个按钮高亮显示
const checkList = [{
        name: '今日'
    },
    {
        name: '昨日'
    },
    {
        name: '本周'
    },
    {
        name: '本月'
    }
]

const emits = defineEmits(['select'])

// const format = date => date.format('YYYY-MM-DD HH:mm:ss')
// 日期选项 0今日  1昨日 2本周  3本月
const onCheck = parameIndex => { 
    checkActive.value = parameIndex
    if(parameIndex === 4){
        timeRangeShow.value = true
        return
    }   
    // console.log('REPORT_TIME-check:',ls.get('REPORT_TIME').startTime)   console.log('REPORT_TIME-check:',orgReportTime.getReportTime)  console.log('REPORT_TIME-check:',appStore.orgReportTime)  
    startTime.value = transformWorkTime(parameIndex,appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0]
    endTime.value = transformWorkTime(parameIndex,appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1]   
    // switch (k) {
    //     case 0:
    //         startTime.value = format(dayjs().startOf('day'))
    //         endTime.value = format(dayjs())
    //         break
    //     case 1:
    //         startTime.value = format(dayjs().subtract(1, 'day').startOf('day'))
    //         endTime.value = format(dayjs().subtract(1, 'day').endOf('day'))
    //         break
    //     case 2:
    //         startTime.value = format(dayjs().startOf('isoWeek').startOf('day'))
    //         endTime.value = format(dayjs())
    //         break
    //     case 3:
    //         startTime.value = format(dayjs().startOf('month').startOf('day'))
    //         endTime.value = format(dayjs())
    //         break
    //     case 4:
    //         timeRangeShow.value = true
    //         break
    // }
    if (parameIndex >= 0 && parameIndex <= 3) {
        emits('select', unref(startTime), unref(endTime))
    }
} 
// 选定日期
const onConfirm = e => {
    startTime.value = `${e[0].selectedValues.join('-')} ${e[1].selectedValues.join(':')}:00`
    endTime.value = `${e[2].selectedValues.join('-')} ${e[3].selectedValues.join(':')}:00`
    emits('select', unref(startTime), unref(endTime))
    timeRangeShow.value = false
}
const userCode = ref('')
const oninit = ()=>{
    if(ls.get('USER_INFO') && ls.get('USER_INFO').userCode == 'admin'){
        userCode.value = ls.get('USER_INFO').userCode
    }else{
        userCode.value = ''
    }
}
oninit()
</script>
<style scoped lang="scss">
.z-time {
    .records-container-header {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px; 
        margin-left: -9px;
        height: 52px;

        .container-header-item {
            background: #3d3d4c;
            border-radius: 4px;
            padding: 9px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
            // width: 20%;
            width: calc(19% - 9px);
            margin-left: 9px;
            text-align: center;
            cursor: pointer;
            &.noadmin{ 
                width: calc(25% - 9px);
                text-align: center;
            }
            &.active {
                color: #ffffff;
                background: #ffaa00;
            }
        }

        .container-header-custom { 
            width: calc(24% - 9px);
            margin-left: 9px;
            text-align: center;
            position: relative;
            background: #3d3d4c;
            border-radius: 4px;
            padding: 9px 22px 9px 10px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
            cursor: pointer;

            &.active {
                color: #ffffff;
                background: #ffaa00;
            }

            .header-select-icon {
                width: 10px;
                height: 100%;
                position: absolute;
                right: 9px;
                top: 0;
                background-image: url('@/assets/svg/open/v_open_triangle.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 10px 6px;
            }
        }
    }

    .records-container-time {
        display: flex;
        justify-content: space-between;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        padding: 0 12px;

        .container-time-item {
            background: #262626;
            border-radius: 4px;
            padding: 10px 18px;
            font-size: 12px;
            line-height: 12px;
            width: 47%;
            text-align: center;
        }

        .container-time-center {
            width: 6%;
            text-align: center;
            font-size: 12px;
            line-height: 12px;
            align-self: center;
        }
    }
}

// .z-time-bottom{
//     width: 100%;
//     height: 84px;
// }
</style>